import React,{Component} from 'react'
import {connect} from 'react-redux'
import {
    fetchBookChapter,
    fetchBookWord
} from '../redux/actions/actions'
import BookContent from '../components/BookContent' 
import Loading from '../components/Loading'
class BookContentContainer extends Component {

    componentWillMount() {
        const {match} = this.props
        let id = match.params.id
        let chapter = match.params.chapter
        this.props._getBookChapter(id,chapter)
    }
    
    render () {
        const {bookContent,match,contentIsShow} = this.props
        return (
            <div>
                {contentIsShow && 
                    <BookContent
                        prev={Number(match.params.chapter)}
                        next={Number(match.params.chapter)+1}
                        match={match}
                        bookContent={bookContent}
                    />
                }
                <Loading
                    isShow={!this.props.contentIsShow}/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        bookContent:state.bookContent.chapter,
        bookChapterList:state.bookChapterList,
        contentIsShow:state.bookContent.isShow
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        _getBookChapter:(id,chapter)=>{
            dispatch(fetchBookChapter(id,chapter))   
        },
        _getBookWord:(link)=>{
            dispatch(fetchBookWord(link))
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BookContentContainer)